<template>
  <section>
    <img class="bg" src="/static/images/pic0.png" alt="">
    <h3>{{question.questionName}}</h3>
    <button v-for="(option, index) in question.optionList" :key="index"
    :class="[index === active ? 'active' : '']"
    @click="click(index, question.id, option.id)">
      {{option.optionName}}
    </button>
  </section>
</template>

<script>
export default {
  name: 'question1',
  data () {
    return {
      active: -1,
      resultData: {
        content: '',
        optionId: 0,
        optionOrder: 0,
        questionId: 0,
        type: 1
      }
    }
  },
  props: [
    'question'
  ],
  created () {
    //  alert(JSON.stringify(this.question))
  },
  methods: {
    click (index, questionId, optionId) {
      if (this.active !== index) {
        this.active = index
        this.resultData.questionId = questionId
        this.resultData.optionId = optionId
        this.$emit('pushResult', this.resultData)
        this.$emit('next')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.bg {
  height: 100vw;
  width: 100vw;
}
section {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 100px;
}

h3 {
  font-size: 40px;
  color: #999;
  line-height: 60px;
  margin: 30px auto;
}

button {
  width: 600px;
  height: 150px;
  margin: 20px auto;
  font-size: 40px;
  color: #666;
}
.active {
  color: #fff;
  background-color: #2e3192;
}
</style>
